import React, { Component } from "react";
import { Checkbox } from "antd";
import ReasonSetting from "../../reasons-config/reasons-setting";

const Group = Checkbox.Group;

class SecondCheckbox extends Component {
  constructor(props) {
    super(props);
    this.values = {
      [props.headKey]: props.value[props.headKey] || false,
      [props.contentKey]: props.value[props.contentKey] || [],
    };
    this.state = {};
  }

  onCheckboxChange = (eve) => {
    const { headKey } = this.props;
    this.values[headKey] = eve.target.checked;
    this.onChange();
  };

  onGroupChange = (values) => {
    const { contentKey, value, headKey } = this.props;
    this.values[contentKey] = values;
    this.values[headKey] = value[headKey];
    this.onChange();
  };

  onChange = () => {
    const { onChange } = this.props;
    if (onChange) {
      onChange(this.values);
    }
  };

  render() {
    const { value, optionItem, headKey, contentKey } = this.props;
    return (
      <div>
        <Checkbox checked={value[headKey]} onChange={this.onCheckboxChange}>
          {optionItem.title}
        </Checkbox>
        {value[headKey] && (
          <ReasonSetting
            id={contentKey}
            source="airplane"
            value={value[contentKey]}
            onChange={this.onGroupChange}
            companyOID={this.props.companyOID}
          />
        )}
      </div>
    );
  }
}

export default SecondCheckbox;
